<template>
  <div class="tab-container">
    <TabBar v-bind:tab-ids="tabGroup.tabIds"  v-bind:tab-group-id="tabGroupId"  v-bind:containing-pane-id="containingPaneId"  v-bind:defaultContent-type="defaultContentType" />
    <TabContent v-bind:tab-ids="tabGroup.tabIds" v-bind:default-tab-component="defaultTabComponent" v-bind:tab-group-id="tabGroupId" />
  </div>
</template>

<script>
  import _ from 'lodash'
  import TabBar from './tab-bar.vue'
  import TabContent from './tab-content.vue'
  import { mapMutations } from 'vuex'

  export default {
    name: 'App',
    components: {
      TabBar,
      TabContent
    },
    props: {
      containingPaneId: { type: String },
      defaultContentType: { type: String },
      defaultTabComponent: { type: Object },
      tabGroupId: { default: _.uniqueId('tab_group_') }
    },
    computed: {
      tabGroup: function () {
        return this.$store.state.tab.tabGroups[this.tabGroupId]
      }
    },
    methods: {
      ...mapMutations('tab', {
        createGroup: 'tabCreateGroup'
      })
    },
    beforeMount () {
      if (!this.tabGroup) {
        this.createGroup({ groupId: this.tabGroupId, defaultContentType: this.defaultContentType })
      }
      // if (containingPaneId) updatePane({ id: containingPaneId, tabGroupId })
    }
  }

</script>
